<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas" width="800" height="800"></canvas>
  <script>
    const canvasDom = document.getElementById('canvas');
    // 获取画笔
    const drawer = canvasDom.getContext('2d');  
    // ====== LOG START ======
    console.log('\n');
    console.group('Log');
    console.log("drawer: ", drawer);
    console.groupEnd();
    console.log('\n');
    // ====== LOG END ======
    // 绘制圆弧的方法
    // drawer.arc(圆心x, 圆心y, 半径)
    // 绘制圆的方法
    // drawer.arc(圆心x, 圆心y, 半径, 开始的角度, 结束的角度, 逆时针/顺时针) 默认顺时针(false) 逆时针（true）
    drawer.beginPath()
    drawer.arc(300, 200, 50, 0, Math.PI, false);
    // drawer.fill();
    drawer.stroke();
    drawer.closePath();

    // 绘制笑脸😊
    drawer.beginPath();
    drawer.arc(75, 75, 50, 0, Math.PI * 2);
    drawer.stroke();
    drawer.closePath();
    drawer.beginPath();
    drawer.arc(75, 75, 35, 0, Math.PI);
    drawer.stroke();
    drawer.closePath();
    drawer.beginPath();
    drawer.arc(40, 35, 20, 0, Math.PI * 2);
    drawer.stroke();
    drawer.closePath();
    drawer.beginPath()
    drawer.arc(120, 36, 20, 0, Math.PI * 2)
    drawer.stroke()
    drawer.closePath();
    drawer.beginPath()
    drawer.arc(75, 80, 1, 0, Math.PI * 2)
    drawer.stroke()
    drawer.closePath();
  </script>
</body>
</html>